<template>
  <div class="brand">
      <div class="top">  
    <el-form :inline="true" >
    <el-form-item label="名称">
     <el-input v-model="ruleForm.input" placeholder="属性名称" style="width:200px" @input="inputFn"></el-input>
     </el-form-item>
     <el-button type="primary" class="bianji" @click="queryFn">查询</el-button>
     <el-button type="primary" class="bianji" @click="addFn">添加</el-button>
    </el-form>
      </div>

      <div class="table">
          <el-table
      :data="tableData"
      border
      style="width: 100%"
      >
      <el-table-column
        prop="id"
        label="ID">
      </el-table-column>

      <el-table-column
        prop="name"
        label="品牌名称">
      </el-table-column>

      <el-table-column
        prop="floor_price"
        label="最低价">
      </el-table-column>

      <el-table-column
        prop="is_new"
        label="新品">
        <template slot-scope="scope">
            <span>{{scope.row.is_new===1?'是':'否'}}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="is_show"
        label="显示">
                <template v-slot="scope">
            <span>{{scope.row.is_show===1?'是':'否'}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作">
        <template slot-scope="scope">
            <el-button type="primary" class="bianji" @click="editFn(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>
      </div>
      <div class="footer">
          <GoodsFooter @fn2="pageSizeFn"  @fn="currentPageFn" :total="count" :pageSizes="pageSize" :currentPage4="currentPage" />
      </div>
  </div>
</template>

<script>
import GoodsFooter from "../good/GoodsFooter.vue"
const {getBrandLists} = require("../../request/httpApi")
export default {
    components:{
        GoodsFooter
    },
    data(){
        return {
            ruleForm:{
          //输入框的值
                input:''
            },

            //当前页
            currentPage:1,
            //总的条目数
            count:0,
            //一页的数量
            pageSize:10,
            //页面的渲染数组
            tableData:[],

        }
    },
    methods:{
        //点击编辑 带参跳转
        editFn(id){
            // console.log(id);
             this.$router.push(`/editbrand/${id}`)
        },
        //点击添加跳转
        addFn(){
            this.$router.push('/addbrand')
        },
        //输入框事件 拿到值
        inputFn(e){
            // console.log(e);
            this.ruleForm.input = e
        },
        //查询事件
        queryFn(){
            if(this.ruleForm.input === '') {
                this.$message.error("请输入查询的内容")
                return
            }
             this.brandListsFn()
        },
        //点击页码数的请求
        pageSizeFn(val){
            // console.log(val);
            this.pageSize = val
            this.brandListsFn()
        },
        //点击下一页的请求
        currentPageFn(val){
            // console.log(val);
            this.currentPage = val
            this.brandListsFn()
        },
         //品牌列表的数据
        brandListsFn(){
            getBrandLists({
            page:this.currentPage,
            size:this.pageSize,
            name:this.ruleForm.input
        }).then( res => {
            // console.log(res);
            if(res.errno===0){
                let {currentPage,count,pageSize,data} = res.data
                this.tableData = data
                this.currentPage = currentPage
                this.count = count
                this.pageSize = pageSize
            }
        })
        }
    },
    created(){
        this.brandListsFn()
    }

}
</script>

<style lang="less">
  .brand{
        padding: 10px;
        background-color: #fff;
        .el-table__row{
            height: 57px;
            box-sizing: border-box;
        }
        .bianji{
            width: 56px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .el-form {
            display: flex;
            .el-button{
                margin-top: 4px;
            }
        }

 
    }
</style>